<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 100px auto;
            width: 500px;
        }
        .box>input{
            height: 30px;
            text-indent: 15px;
            border: 1px solid #8bc58b;
            /* 外边框 轮廓 */
            outline: none;
        }
        .box>span{
            /* 默认不显示 */
            display:none;
            /* 垂直方向对齐方式 */
            vertical-align:middle;
            width: 200px;
            line-height: 30px;
            text-indent: 14px;
          
        }
        .box>span.wrong{
            display: inline-block;
            border: 1px solid#f9b098;
            color:#ff2f66;
            background: #ffdcd0 url(./imgs/wrong.png) no-repeat left;
            
        }
        .box>span.right{
            display: inline-block;
            border: 1px solid#c9ddc9;
            color:#189189;
            background: #dfffdf url(./imgs/right.png) no-repeat left;
            
        }
    </style>
    <script>
        window.onload=function(){
            var ipt = document.querySelector('input')
            var spn = document.querySelector('span')
            // input 失去焦点事件
            ipt.onblur=function(){
                // input 的value属性 可以获取到，输入框里面的值
                // 在这里this 指向的是 事件的调用者(一般情况)
                var val = this.value
                if(val===''){
                    // var txt  = document.createTextNode('分数不能为空')
                    // spn.append(txt)
                    spn.innerText='分数不能为空'
                    spn.className="wrong"
                    return
                }
                // isNaN(参数) 作用：判断参数是 不是一个数 如果，不是number ，返回true，是number返回false
                if(isNaN(val)){
                    spn.innerText='请输入数字'
                    spn.className="wrong"
                    return
                }
                // 只要是从input框里面获取的值，都是string类型
                if(Number(val)>150 || Number(val)<0){
                    spn.innerText='成绩范围0-150'
                    spn.className="wrong"
                    return
                }

                spn.innerText='数据正确'
                spn.className="right"

            }

        }
    </script>
</head>
<body>
    <div class="box">
        <label for="score">高数：</label>
        <input type="text" id="score" placeholder="请输入高数成绩">
        <span></span>
    </div>
</body>
</html>